<!--
 * @Author: John Trump
 * @Date: 2020-07-14 20:57:25
 * @LastEditors: John Trump
 * @LastEditTime: 2020-07-16 11:18:03
 * @FilePath: /src/views/health/index.vue
-->

<template>
  <div>
    <div class="health-view main">
      <div class="homemain">
        <div class="header">
          <div>
            <!-- 日期选择器button -->
            <mu-button
              @click="isShowDatePicker = !!!isShowDatePicker"
              class="date-picker-button"
              color="success"
              round
              ripple
            >{{selectedMounth}}</mu-button>
            <div class="custom-date-picker" v-show="isShowDatePicker" style="z-index: 100">
              <mu-paper :z-depth="5">
                <mu-date-picker type="date" :date.sync="date" color="#33CB98" @change="handleDateChange"></mu-date-picker>
              </mu-paper>
            </div>
          </div>
          <!-- 分页Pagination -->
          <mu-pagination
            class="custom-pagination"
            raised
            circle
            @change="handlePageChange"
            :page-count="pageCount"
            :total="total"
            :current.sync="current"
          ></mu-pagination>
        </div>
        <div class="context">
          <!-- 健康得分 -->
          <div class="section-0">
            <div class="summary">
              <h1>&nbsp;</h1>
              <div class="current-date">{{selectedDate}}</div>
            </div>
            <div class="wave">
              <Wave>
                <div slot="context">
                  <span style="color:rgba(51,203,152,1);">100</span>
                </div>
              </Wave>
              <h1>健康得分</h1>
            </div>
          </div>
          <!-- 睡眠与饮水 -->
          <div class="section-1">
            <div class="summary">
              <h1>睡眠</h1>
              <div class="score">30分/30分</div>
            </div>
            <div class="card">
              <div class="card-title">睡眠时间</div>
              <div class="card-data">
                <div class="data">
                  8.4
                  <span class="unit">小时</span>
                </div>
              </div>
            </div>
            <div class="summary">
              <h1>饮水</h1>
              <div class="score">30分/30分</div>
            </div>
            <div class="card">
              <div class="card-title">饮水量</div>
              <div class="card-data">
                <div class="data">
                  5.4
                  <span class="unit">升</span>
                </div>
              </div>
              <div class="card-title">饮水次数</div>
              <div class="card-data">
                <div class="data">
                  8
                  <span class="unit">次</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 饮食 -->
          <div class="section-2">
            <div class="summary">
              <h1>饮食</h1>
              <div class="score">30分/30分</div>
            </div>
            <div class="card-collapse">
              <div class="card" style="width: 370px; z-index: 2;">
                <div class="card-title">合计</div>
                <h2>
                  <img src="../../assets/images/color_icon_clock.png" /> 热量
                </h2>
                <div class="card-data">
                  <div class="data">3233/3000千卡</div>
                </div>
                <h2>
                  <img src="../../assets/images/color_icon_egg.png" /> 蛋白质
                </h2>
                <div class="card-data">
                  <div class="data">3233/3000千卡</div>
                </div>
                <h2>
                  <img src="../../assets/images/color_icon_meat.png" /> 脂肪摄入
                </h2>
                <div class="card-data">
                  <div class="data">3233/3000千卡</div>
                </div>
                <h2>
                  <img src="../../assets/images/color_icon_breed.png" />
                  碳水化合物摄入
                </h2>
                <div class="card-data">
                  <div class="data">3233/3000千卡</div>
                </div>
                <div class="other">
                  <div class>其他营养摄入情况查看</div>
                </div>
              </div>
              <div class="accordion-wrapper">
                <div class="card collapse" :class="tab === 1 ? 'active' : ''">
                  <h1>早餐</h1>
                  <div>
                    <div class="image-item">
                      <div class="item">
                        <div class="img">
                          <img src="http://lorempixel.com/640/480/sports" />
                        </div>
                        <div class="desc">
                          <div class="title">跑步</div>
                          <div class="calorie">613千卡路里</div>
                        </div>
                      </div>
                      <div class="item">
                        <div class="img">
                          <img src="http://lorempixel.com/640/480/sports" />
                        </div>
                        <div class="desc">
                          <div class="title">跑步</div>
                          <div class="calorie">613千卡路里</div>
                        </div>
                      </div>
                      <div class="item">
                        <div class="img">
                          <img src="http://lorempixel.com/640/480/sports" />
                        </div>
                        <div class="desc">
                          <div class="title">跑步</div>
                          <div class="calorie">613千卡路里</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card collapse" :class="tab === 2 ? 'active' : ''">
                  <h1>午餐</h1>
                  <div>
                    <div class="image-item">
                      <div class="item">
                        <div class="img">
                          <img src="http://lorempixel.com/640/480/sports" />
                        </div>
                        <div class="desc">
                          <div class="title">跑步</div>
                          <div class="calorie">613千卡路里</div>
                        </div>
                      </div>
                      <div class="item">
                        <div class="img">
                          <img src="http://lorempixel.com/640/480/sports" />
                        </div>
                        <div class="desc">
                          <div class="title">跑步</div>
                          <div class="calorie">613千卡路里</div>
                        </div>
                      </div>
                      <div class="item">
                        <div class="img">
                          <img src="http://lorempixel.com/640/480/sports" />
                        </div>
                        <div class="desc">
                          <div class="title">跑步</div>
                          <div class="calorie">613千卡路里</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card collapse" :class="tab === 3 ? 'active' : ''">
                  <h1>晚餐</h1>
                  <div>
                    <div class="image-item">
                      <div class="item">
                        <div class="img">
                          <img src="http://lorempixel.com/640/480/sports" />
                        </div>
                        <div class="desc">
                          <div class="title">跑步</div>
                          <div class="calorie">613千卡路里</div>
                        </div>
                      </div>
                      <div class="item">
                        <div class="img">
                          <img src="http://lorempixel.com/640/480/sports" />
                        </div>
                        <div class="desc">
                          <div class="title">跑步</div>
                          <div class="calorie">613千卡路里</div>
                        </div>
                      </div>
                      <div class="item">
                        <div class="img">
                          <img src="http://lorempixel.com/640/480/sports" />
                        </div>
                        <div class="desc">
                          <div class="title">跑步</div>
                          <div class="calorie">613千卡路里</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 运动 -->
          <div class="section-3">
            <div class="summary">
              <h1>运动</h1>
              <div class="score">10分/10分</div>
            </div>
            <div class="card">
              <div class="card-title">合计</div>
              <h2>
                <img src="../../assets/images/color_icon_flash.png" /> 热量消耗
              </h2>
              <div class="card-data">
                <div class="data" style="font-size:34px;">1233卡路里</div>
              </div>
              <h2>
                <img src="../../assets/images/color_icon_clock.png" /> 运动时长
              </h2>
              <div class="card-data">
                <div class="data" style="font-size:34px;">123/90分钟</div>
              </div>
              <div class="image-item">
                <div class="item">
                  <div class="img">
                    <img src="http://lorempixel.com/640/480/sports" />
                  </div>
                  <div class="desc">
                    <div class="title">跑步</div>
                    <div class="calorie">613千卡路里</div>
                    <div class="calorie">56分钟</div>
                  </div>
                </div>
                <div class="item">
                  <div class="img">
                    <img src="http://lorempixel.com/640/480/sports" />
                  </div>
                  <div class="desc">
                    <div class="title">跑步</div>
                    <div class="calorie">613千卡路里</div>
                    <div class="calorie">56分钟</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <BasicLayout></BasicLayout>
  </div>
</template>

<script>
import Wave from "../../components/Wave";
import BasicLayout from "../../components/BasicLayout";
import dayjs from 'dayjs';

export default {
  name: "Health",
  methods: {
    /** 当前页更改时触发事件 */
    handlePageChange() {
      console.log("handlePageChange");
    },
    handleDateChange(date) {
      this.date = date;
      this.isShowDatePicker = false;
    }
  },
  data() {
    return {
      pageCount: 7,
      /** 总数  */
      total: 1000,
      /** 当前页码  */
      current: 1,
      /** 是否显示日期选择器 */
      isShowDatePicker: false,
      /** 选中的日期(月份) */
      date: new Date(),
      /** 中午晚餐选中的次序 */
      tab: 1
    };
  },
  computed: {
    selectedDate() {
      return dayjs(this.date).format(`YYYY.MM.DD`)
    },
    selectedMounth() {
      return dayjs(this.date).format(`YYYY年MM月`)
    }
  },
  components: {
    Wave,
    BasicLayout
  }
};
</script>

<style lang="less" scoped>
.health-view {
  padding: 30px 40px;
  margin-right: 140px;
}

.homemain {
  width: 100%;
  height: 100vh;
}

.date-picker-button {
  box-sizing: content-box;
  font-size: 34px;
  font-weight: bold;
  padding: 0 30px;
  height: 80px;
  background: rgba(51, 203, 152, 1);
  border: 3px solid rgba(51, 203, 152, 1);
  border-radius: 30px;
}

.header {
  display: flex;
  justify-content: space-between;
}

.context {
  margin-top: 40px;
  display: flex;
  .card {
    text-align: left;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 30px 0px rgba(18, 70, 53, 0.08);
    border-radius: 50px;
    padding: 35px;
    h2 {
      margin: 10px 0;
      font-size: 28px;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
      display: flex;
      align-items: center;
      img {
        width: 26px;
        height: 26px;
        margin-right: 20px;
      }
    }
    .card-title {
      position: relative;
      display: inline-block;
      font-size: 28px;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
      /* 下划线 */
      &::after {
        content: "";
        display: block;
        background: rgba(51, 203, 152, 1);
        border-radius: 3px;
        width: 120%;
        height: 6px;
        position: relative;
        top: 0px;
      }
    }
    .card-data {
      font-size: 60px;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
      line-height: 60px;
      margin: 40px 0 20px 0;
      .unit {
        font-size: 32px;
      }
    }
  }
  .summary {
    display: flex;
    align-items: center;
    h1 {
      font-size: 34px;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
    }
    .score {
      padding-left: 20px;
      font-size: 34px;
      font-weight: bold;
      color: rgba(108, 223, 172, 1);
      line-height: 60px;
    }
  }
  .section-0 {
    flex: 1;
    // .summary {
    //   justify-content: center;
    // }
    .current-date {
      display: inline-block;
      width: 80%;
      background: rgba(51, 203, 152, 0);
      border: 3px solid rgba(51, 203, 152, 1);
      border-radius: 20px;
      font-size: 28px;
      font-weight: bold;
      color: rgba(51, 203, 152, 1);
      line-height: 60px;
      justify-self: flex-start;
    }
    .wave {
      z-index: -1;
      display: flex;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* 健康得分 */
      h1 {
        font-size: 34px;
        font-weight: bold;
      }
    }
  }
  .section-1 {
    flex: 1;
  }
  .section-2 {
    flex: 2;
    margin: 0 20px;
    .card-collapse {
      display: flex;
      flex-direction: row;
      position: relative;
      .collapse {
        position: absolute;
        width: 370px;
        overflow: hidden;
        h1 {
          text-align: right;
        }
      }
      .active {
        left: 280px;
        padding-left: 90px;
        z-index: 1;
        h1 {
          text-align: left;
        }
      }
    }
    .card {
      height: 730px;
    }
    .card-data {
      margin: 0;
      margin-left: 46px;

      .data {
        font-size: 30px;
        width: 100%;
      }
    }
    .other {
      margin-top: 56px;
      text-align: right;
      font-size: 24px;
      font-weight: bold;
      text-decoration: underline;
      color: rgba(225, 231, 245, 1);
    }
    .accordion-wrapper {
      position: absolute;
      left: 20px;
    }
  }
  .section-3 {
    flex: 1;
    .card-data {
      margin: 0;
    }
  }
}

.image-item {
  display: flex;
  flex-direction: column;
  .item {
    display: flex;
    align-items: center;
    margin-top: 20px;
    .img {
      width: 90px;
      height: 90px;
      margin-right: 18px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 20px;
      }
    }
    .desc {
      display: flex;
      flex-direction: column;
      .title {
        font-size: 28px;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
      }
      .calorie {
        font-size: 24px;
        font-weight: bold;
        color: rgba(127, 127, 127, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

/* 自定义月份选择器样式 */
.custom-date-picker {
  position: absolute;
  top: 130px;
  left: 25px;
}

/* 自定义分页样式 */
.custom-pagination {
  /deep/ & > button.mu-button {
    background: rgba(51, 203, 152, 1);
  }
  /deep/ .mu-button {
    box-sizing: content-box;
    width: 94px;
    height: 80px;
    background: rgba(225, 231, 245, 1);
    border-radius: 30px;
    font-size: 34px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0px 2px 30px 0px rgba(18, 70, 53, 0.08);
  }
  /deep/ .mu-pagination-svg-icon {
    width: 40px;
    height: 40px;
  }
  /deep/ .is-current {
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
  }
}
</style>
